<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <el-button
      class="commonBut saveBtn funComBut addProblem"
      icon="icon iconfont icontianjia"
      v-if="
        $store.state.userType === 'PROJECT_ADMINISTRATOR' ||
        $store.state.userType === 'LABOR_ADMINISTRATOR' ||
        $store.state.userType === 'FENBAO_MANAGER'
      "
      @click="goHelpAdd"
    >
      <span class="opetareText">添加问题反馈</span>
    </el-button>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="紧急程度" class="row-padding-bottom">
              <el-select
                v-model="filterField.anxiousType"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in anxiousTypeOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="问题类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.feedbackType"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in feedbackTypeOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="受理情况" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="反馈人姓名" class="row-padding-bottom">
                <el-input
                  v-model="filterField.reporter"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="联系方式" class="row-padding-bottom">
                <el-input
                  v-model="filterField.tel"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="反馈时间" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <el-button
                class="commonBut saveBtn funComBut bzjAddJc"
                icon="icon iconfont icondaochu"
                @click="getExportList"
              >
                <span class="opetareText">导出</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div class="proDetailsListBox">
        <el-table
          :data="tableList"
          @sort-change="sortChange"
          v-loading="loading"
          :max-height="tableHeight"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="项目名称" width="200">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="feedbackTypeName"
            label="问题类型"
            min-width="220"
            align="left"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.feedbackTypeName"
                :columnName="'feedbackTypeName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="statusName"
            label="受理情况"
            align="center"
            min-width="100"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="anxiousTypeName"
            label="紧急程度"
            align="center"
            min-width="100"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="reporter"
            label="反馈人姓名"
            align="center"
            min-width="120"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            label="联系方式"
            align="center"
            min-width="160"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.tel | telHandler }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            sortable="custom"
            label="反馈时间"
            align="center"
            min-width="200"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column label="详情描述及说明" width="330">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.description"
                :columnName="'description'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="left"
            fixed="right"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toDetail(scope.row)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
    <el-dialog
      title="添加"
      :visible.sync="addDialog"
      width="900px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      @close="cancelAdd"
      class="doubleColumnsDialog"
    >
      <help-add ref="childAdd" @cancelAdd="cancelAdd"></help-add>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelAdd" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="saveAdd"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
import { mapState } from 'vuex'
import helpAdd from '@/components/help/helpAdd.vue'

export default {
  name: 'feedbackList',
  components: {
    helpAdd,
  },
  data() {
    return {
      tableHeight: null,
      advanced: false,
      titleText: '问题反馈',
      //表格数据
      tableList: [],
      requestUrl: 'api-m/feedback/page',
      areaId: [],
      //搜索条件
      filterField: {
        projectId: '',
        projectName: '',
        anxiousType: '', //紧急程度
        feedbackType: '', //问题类型
        status: '', //受理状态
        reporter: '',
        tel: '',
        createStartTime: '',
        createEndTime: '',
      },
      pageSize: 20,
      pageNo: 1,
      loading: false,
      anxiousTypeOptions: [],
      feedbackTypeOptions: [],
      statusOptions: [],
      addDialog: false, //添加弹框
      canLogin: false,
    }
  },
  created() {
    if (
      this.$store.state.userType === 'PROJECT_ADMINISTRATOR' ||
      this.$store.state.userType === 'LABOR_ADMINISTRATOR' ||
      this.$store.state.userType === 'FENBAO_MANAGER'
    ) {
      this.filterField.projectId = this.$store.state.projectId
    }
  },
  mounted() {
    this.getOptions('ANXIOUS_TYPE', 'anxiousTypeOptions')
    this.getOptions('FEEDBACK_TYPE', 'feedbackTypeOptions')
    this.getOptions('FEEDBACK_STATUS', 'statusOptions')
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 324
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 324
      }
    })
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    // 下拉字典ANXIOUS_TYPE紧急程度/FEEDBACK_TYPE问题类型/FEEDBACK_STATUS受理情况
    getOptions(type, typeOptions) {
      return this.axios({
        method: 'post',
        url: 'api-m/base/dicitem/findbytype',
        data: {
          type,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this[typeOptions] = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 是否有导出数据
    getExports() {
      return this.axios({
        method: 'post',
        url: 'api-m/feedback/page',
        data: this.filterField,
      })
        .then((response) => {
          if (!response.data.hasError) {
            return response.data.result.results &&
              response.data.result.results.length > 0
              ? true
              : false
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    /**
     * @description: 导出报表
     */
    async getExportList() {
      const flag = await this.getExports()
      let {
        projectName,
        anxiousType,
        feedbackType,
        status,
        reporter,
        tel,
        createStartTime,
        createEndTime,
        sortField,
        sort,
      } = this.filterField
      if (flag) {
        window.location.href =
          common.commonApi +
          'api-m/feedback/export?projectName=' +
          projectName +
          '&anxiousType=' +
          anxiousType +
          '&feedbackType=' +
          feedbackType +
          '&status=' +
          status +
          '&reporter=' +
          reporter +
          '&tel=' +
          tel +
          '&createStartTime=' +
          createStartTime +
          '&createEndTime=' +
          createEndTime +
          '&sortField=' +
          sortField +
          '&sort=' +
          sort +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message.warning('暂无数据导出')
      }
    },
    /**
     * @description: 开始日期
     * @param {*} val
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.createStartTime = val
      } else {
        this.filterField.createStartTime = ''
      }
    },
    /**
     * @description: 结束日期
     * @param {*} val
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.createEndTime = val
      } else {
        this.filterField.createEndTime = ''
      }
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    toDetail({ id } = row) {
      this.$router.push({
        path: '/home/help/feedbackDetail',
        query: {
          id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/help/feedbackList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    goHelpAdd() {
      this.addDialog = true
    },
    // 取消添加
    cancelAdd(val) {
      this.addDialog = false
      this.$refs.childAdd.cancel()
      if (val) {
        this.searchList()
      }
    },
    // 保存添加
    saveAdd() {
      // this.canLogin = true;
      this.$refs.childAdd.save()
    },
  },
}
</script>

<style scoped lang="less">
.container {
  position: relative;
  .addProblem {
    position: absolute;
    right: 20px;
    top: 7px;
  }
}
.mainCon {
  top: 198px;
}
.proDetailsListBox {
  padding: 24px;
  background: #fff;
}
/deep/.el-dialog__body {
  padding: 0 !important;
}
@import '../../../static/css/filterArea.less';
</style>
